<template>
	<view class="content_match">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="匹配结果" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="tuibox">
			<view class="tuititle">
				匹配写手
				<view class="title_info" @click="go_pre()">
					<image :src="'/images/tag_icon.png' | formatImgUrl" mode=""></image>
					<text class="text">调整标签</text>
				</view>
				
			</view>
			<view class="tuiyou" @click="show = true">
				<image :src="'/images/ib.png' | formatImgUrl" class="tuipic" mode=""></image>
				<view class="tuitxt">
					筛选
				</view>
			</view>
		</view>
		
		<view>
			<view class="empytView" v-if="!list.total">
				<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
				<!-- <view>- 空列表 -</view> -->
			</view>
			<view class="yaobox" v-for="item in writerList" @tap="$go('/pages/my/place?id='+item.gid)">
				<image :src="item.pic | formatImgUrl" class="yaopic" mode=""></image>
				<view class="yaoyou">
					<view class="yaotitle oneline display-flex">
						{{item.username}}
						<image
							:src="$options.filters.formatImgUrl(item.writer_level.is_active?item.writer_level.level.image:item.writer_level.level.hide_img)"
							@tap.stop="$go('/pages/user/grade?uid='+item.membe_id)" class="jipic" mode="aspectFit">
						</image>
						<!-- <view class="evaluate">
							特别好评
						</view> -->
						
						<image :src="'/images/bao.png'  | formatImgUrl" @click.stop="uid = item.id,showReport = true" class="jubox" mode="aspectFit"></image>
					</view>
					<scroll-view scroll-x="true" class="qianbox">
						<view class="qli" v-for="items in item.writer_diy_tags">
							{{items}}
						</view>
					</scroll-view>
		
					<view class="zibox">
						<view class="zititle display-flex">
							{{item.price}}<text>币/{{item.word_count}}</text>
							
							<block v-if="item.is_line == 1">
								<view class="dian"></view>
								<view class="txt">
									当前在线
								</view>
							</block>
							<block v-else>
								<view class="dian2"></view>
								<view class="txt2">
									{{item.line_time_str}}
								</view>
							</block>
						</view>
						<view class="zitxt">
							已有{{item.cnt?item.cnt:0}}位用户约文
						</view>
					</view>
				</view>
			</view>
		
			<!-- <view class="nomore" v-if="writerList.length && list.current_page == list.last_page">
				没有更多了~
			</view> -->
		</view>
		
		<!-- 举报写手 -->
		<u-popup :show="showReport">
			<view class="mask2">
				<view class="matop" @click="$go('/pages/find/report?id='+uid + '&newtype=2')" >
					<view class="matxt">
						举报
					</view>
					<image :src="'/images/rarr.png'  | formatImgUrl" class="mapic" mode=""></image>
				</view>
				<view class="qubox" @click="showReport = false">
					取消
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="show" mode="bottom" :overlayStyle="{'touch-action':'none'}" @close="close" @open="open">
			<view class="mask">
				<view class="matop" style="height: 1000rpx;overflow-y: scroll; overscroll-behavior: none; ">
					<view class="matitle">
						— 请选择想要寻找的写手类型 —
					</view>
					<view class="bietxt">
						性别 <text>单选</text>
					</view>
					<view class="gebox">
						<cc-multipleBtn :isSingleSel="true" :colors="colors" :remarkList="sexList"
							@tagClick="tagsClick2" :flag="1"></cc-multipleBtn>
						<!-- <view v-for="(item,index) in sexList" class="geli li72" :class="{'active': form.sex?item.id == form.sex:index == 0}"
							@click="navTap(item)">
							{{item.name}}
							<view class="line"></view>
						</view> -->
					</view>
					<view class="geetxt">
						价格筛选<text>单选</text>
					</view>
					<view class="gebox">
						<input type="number" v-model="form.min_price" :always-embed="true" :adjust-position="true"
							placeholder="自定义最低价" cursor-spacing="40" class="geli">
						<input type="number" v-model="form.max_price" :always-embed="true" :adjust-position="true"
							placeholder="自定义最高价" cursor-spacing="40" class="geli">
					
						<!-- 	<cc-multipleBtn :isSingleSel="false" :colors="colors" :remarkList="priceList"
							           @tagClick="tagsClick3" :flag="1"></cc-multipleBtn> -->
					
					</view>
					<view class="geetxt">
						写手等级<text>多选</text>
					</view>
					<view class="dengbox">
						<cc-multipleBtn :isSingleSel="false" :colors="colors" :remarkList="denglist"
							@tagClick="tagsClick" :flag="0"></cc-multipleBtn>
					</view>
					
					
					<view class="geetxt">
						价格排序<text>单选</text>
					</view>
					
					<view class="gebox">
						
						<cc-multipleBtn :isSingleSel="true" :colors="colors" :remarkList="sort_money"
							@tagClick="tagsClick3" :flag="1"></cc-multipleBtn>
					</view>
					
					<view class="geetxt">
						单量排序<text>单选</text>
					</view>
					<view class="gebox">
						<cc-multipleBtn :isSingleSel="true" :colors="colors" :remarkList="sort_num"
							@tagClick="tagsClick4" :flag="1"></cc-multipleBtn>
					</view>
					<view class="geetxt">
						在线状态<text>单选</text>
					</view>
					<view class="gebox">
						<cc-multipleBtn :isSingleSel="true" :colors="colors" :remarkList="onlinelist"
							@tagClick="tagsClick5" :flag="1"></cc-multipleBtn>
					</view>
				</view>
				
		
				<view class="madi">
					<view class="masub clear" @click="clear()">
						清空筛选
					</view>
					<view class="masub" @click="screen">
						确认筛选
					</view>
				</view>
			</view>
		</u-popup>
		
		<!--  -->
		<u-popup :show="middleShow" mode="center" @close="middleShow = false">
			<view class="baibox">
				<image :src="userInfo.pic | formatImgUrl" class="baihead" mode=""></image>
				<view class="nickname">
					{{userInfo.username}}
				</view>
				<view class="xutxt" @click="switchBth = !switchBth">
					<image :src="'/images/switch_icon.png' | formatImgUrl" mode=""></image>{{switchBth?'例文展示':'约文须知'}}
				</view>
				
				<!-- 约文须知 -->
				<scroll-view class="gexu" scroll-y="true" v-if="userInfo.is_writer && switchBth">
					<view class="geli" v-if="userInfo.writer_user_config.personal_note">
						<view class="getitle">
							个人说明：
						</view>
						<view class="getxt">
							{{userInfo.writer_user_config.personal_note}}
						</view>
					</view>
					<view class="geli" v-if="userInfo.writer_user_config.communication_time">
						<view class="getitle">
							沟通时间：
						</view>
						<view class="getxt">
							{{userInfo.writer_user_config.communication_time}}
						</view>
					</view>
					<view class="geli" v-if="userInfo.writer_user_config.remuneration_details">
						<view class="getitle">
							价格明细：
						</view>
						<view class="getxt">
							{{userInfo.writer_user_config.remuneration_details}}
						</view>
					</view>
					<view class="geli" v-if="userInfo.writer_user_config.order_notice">
						<view class="getitle">
							下单须知：
						</view>
						<view class="getxt">
							{{userInfo.writer_user_config.order_notice}}
						</view>
					</view>
					<view class="geli" v-if="userInfo.writer_user_config.publication_works">
						<view class="getitle">
							版权归属：
						</view>
						<view class="getxt">
							{{userInfo.writer_user_config.publication_works}}
						</view>
					</view>
					<view class="geli" v-if="userInfo.writer_user_config.additional_remarks">
						<view class="getitle">
							额外备注：
						</view>
						<view class="getxt">
							{{userInfo.writer_user_config.additional_remarks}}
						</view>
					</view>
				</scroll-view>
				
				
				<!-- 立文展示 -->
				<scroll-view class="gexu" scroll-y="true" v-if="userInfo.is_writer && !switchBth">
					<div class="exhibit">
						<view class="item" v-for="(item,index) in userInfo.imagrs_arr">
							<image :src="item | formatImgUrl" mode="aspectFill" @click="$common.previewImage(item,userInfo.imagrs_arr)"></image>
						</view>
					</div>
					<view class="geli">
						<view class="getxt">
							以上为例文展示内容，仅做展示使用，请勿二次传播、修改、盗用。
						</view>
					</view>
				</scroll-view>
				
				
				
				<view class="fabox" @click="$go('/pages/my/my?id='+userInfo.membe_id)">
					<image :src="'/images/pp.png' | formatImgUrl" class="fapic" mode=""></image>
					<view class="fatxt">
						查看主页
					</view>
				</view>
				
				<view class="fabox" @click="$go('/pages/my/place?id='+gid)">
					<image :src="'/images/ji.png' | formatImgUrl" class="fapic" mode=""></image>
					<view class="fatxt">
						直接下单
					</view>
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="middleShow = false" class="closepic" mode=""></image>
		</u-popup>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: {},
				writerList: [],
				page: 1,
				show: false,
				form: {
					sex: '',
					min_price: '',
					max_price: '',
					fengge: '',
					writer_level: '',
					stype:'',
					sort_num:'',
					sort_money:'',
					onlinelist: ''
				},
				stype:0,
				priceList: [{
					id: 1,
					name: '自定义最低价',
				}, {
					id: 2,
					name: '自定义最高'
				}],
				sexList: [{
					id: 1,
					name: '男',
				}, {
					id: 2,
					name: '女'
				}],
				sort_num: [{
					id: 1,
					name: '由高到底',
				}, {
					id: 2,
					name: '由底到高'
				}],
				sort_money: [{
					id: 1,
					name: '由高到底',
				}, {
					id: 2,
					name: '由底到高'
				}],
				denglist: [{
					id: 1,
					name: '1-10'
				}, {
					id: 2,
					name: '11-20'
				}, {
					id: 3,
					name: '21-30'
				}, {
					id: 4,
					name: '31-40'
				}, {
					id: 5,
					name: '41-50'
				}],
				onlinelist:[{
					id: 1,
					name: '当前在线'
				},{
					id: 2,
					name: '当前离线'
				}],
				deng: 0,
				fengge: [],
				middleShow:false,
				userInfo: {},
				switchBth:true,
				gid:0,
				colors: null,
				uid: '',
				showReport: false
			};
		},
		onLoad(ops) {
			
			this.form.fengge = uni.getStorageSync("tip_ids");
			this.form.stype = ops.stype
			this.stype = ops.stype;
			
			
			this.page = 1;
			this.writerList = [];
			this.list = [];
			this.getIndex()
			this.getWriterList()
		},
		onPullDownRefresh() {
			
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新	
			}, 600);
			
			
			this.clear();
		},
		// 上拉加载
		onReachBottom() {
			if (this.list.current_page < this.list.last_page) {
				this.page++; // 页数加一，加载下一页数据
				this.getWriterList();
			}
		},
		methods:{
			go_pre(){
					uni.navigateBack({//返回上一个页面
					delta: 1
					});
			},
			clear(){
				this.show = false;
				this.form =  {
					sex: '',
					min_price: '',
					max_price: '',
					fengge: '',
					writer_level: '',
					sort_money:'',
					sort_num:'',
					onlinelist: ''
				}
				this.form.fengge = uni.getStorageSync("tip_ids");
				this.form.stype = this.stype
				
				this.page = 1;
				this.writerList = [];
				this.list = [];
				this.getWriterList();
			},
			getIndex() {
				var _this = this;
				this.$api.default.request('index/index', {}, 'GET', false).then((res) => {
					if (res.code) {
			
						_this.indexData = res.data
						console.log(res, 666)
						_this.fengge = res.data.tags
						_this.is_open = res.data.is_open
						// this.denglist = res.data.denglist
					}
				})
			},
			getUserInfo(id,gid) {
				this.gid = gid;
				this.$api.default.request('user/userInfo', {
					uid:id,
					type:1
				}).then((res) => {
					if (res.code) {
						this.userInfo = res.user
						if (!res.user.is_writer) {
							this.navIndex = 3
						}
						this.middleShow = true
						// this.getList()
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			midClose(){
				this.middleShow = false
			},
			midOpen(){
				
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			screen() {
				this.show = false
				this.getWriterList()
			},
			getWriterList() {
				this.form['page'] = this.page
				this.form['is_line'] = this.form.onlinelist
			
				this.$api.default.request('index/getWriterList3', this.form, 'POST', true).then((res) => {
					if (res.code) {
						this.list = res.data
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								this.writerList.push(item)
							})
						} else {
							this.writerList = res.data.data
						}
					}
				})
			},
			tagsClick(tagArr, arr) {
				// 选中数据有变化 重新赋值（可以兼容小程序）
				this.denglist = arr;
				// uni.showModal({
				// 	title: '选中的标签',
				// 	content: '选中的标签 = ' + JSON.stringify(tagArr)
				// })
				var ids = "";
				for (var i = 0; i < tagArr.length; i++) {
					var arr = tagArr[i];
					if (i == 0) {
						ids = "" + arr.id;
					} else {
						ids = ids + ',' + arr.id;
					}
				}
				this.form.writer_level = ids
			},
			tagsClick2(tagArr, arr) {
				this.sexList = arr;
				var ids = "";
				for (var i = 0; i < tagArr.length; i++) {
					var arr = tagArr[i];
					if (i == 0) {
						ids = "" + arr.id;
					} else {
						ids = ids + ',' + arr.id;
					}
				}
				this.form.sex = ids
			},
			tagsClick3(tagArr, arr) {
				this.sort_money = arr;
				var ids = "";
				for (var i = 0; i < tagArr.length; i++) {
					var arr = tagArr[i];
					if (i == 0) {
						ids = "" + arr.id;
					} else {
						ids = ids + ',' + arr.id;
					}
				}
				this.form.sort_money = ids
			},
			tagsClick4(tagArr, arr) {
				this.sort_num = arr;
				var ids = "";
				for (var i = 0; i < tagArr.length; i++) {
					var arr = tagArr[i];
					if (i == 0) {
						ids = "" + arr.id;
					} else {
						ids = ids + ',' + arr.id;
					}
				}
				this.form.sort_num = ids
			},
			tagsClick5(tagArr, arr) {
				this.onlinelist = arr;
				var ids = "";
				for (var i = 0; i < tagArr.length; i++) {
					var arr = tagArr[i];
					if (i == 0) {
						ids = "" + arr.id;
					} else {
						ids = ids + ',' + arr.id;
					}
				}
				this.form.onlinelist = ids
			}
		}
	}
</script>

<style lang="scss">
	.content_match {
	  padding: 20rpx 30rpx;
	  .jipic {
	  	width: 41px;
	  	height:19px;
	  	position: relative;
	  }
	  .tuibox {
	  	display: flex;
	  	align-items: center;
	  	justify-content: space-between;
	  
	  	.tuititle {
	  		font-size: 32rpx;
	  		font-weight: bold;
	  		color: #3D3D3D;
			display: flex;
			.title_info{
				display: flex;
				align-items: flex-end;
				image{
					width: 24rpx;
					height: 24rpx;
					object-fit: cover;
					margin-left: 16rpx;
					margin-right: 4rpx;
					margin-bottom: 4rpx;
					border: 1px dotted #eee;
				}
				.text{
					font-size: 24rpx;
					color: #999999;
				}
			}
	  	}
	  
	  	.tuiyou {
	  		display: flex;
	  		align-items: center;
	  		justify-content: flex-end;
	  
	  		.tuipic {
	  			width: 34rpx;
	  			height: 32rpx;
	  		}
	  
	  		.tuitxt {
	  			font-size: 28rpx;
	  			color: #999999;
	  			padding-left: 10rpx;
	  		}
	  	}
	  }
	  
	  .yaobox {
	  	padding: 20rpx 0;
	  	border-bottom: 1px solid rgba(153, 153, 153, 0.1);
	  	display: flex;
	  	align-items: center;
	  
	  	.yaopic {
	  		width: 148rpx;
	  		height: 148rpx;
	  		border-radius: 50%;
	  		flex-shrink: 0;
	  	}
	  
	  	.yaoyou {
	  		padding: 0 20rpx;
	  		width: 500rpx;
	  
	  		.yaotitle {
	  			font-size: 28rpx;
	  			color: #3D3D3D;
	  			padding-bottom: 12rpx;
	  			display: flex;
	  			align-items: center;
				position: relative;
	  
	  			.jipic {
	  				// position: inherit !important;
	  			}
	  
	  			.evaluate {
	  				width: 100rpx;
	  				height: 32rpx;
	  				border-radius: 8rpx;
	  				padding: 2rpx 8rpx;
	  				background: rgba(69, 196, 176, 0.15);
	  				font-size: 20rpx;
	  				line-height: 32rpx;
	  				color: #45C4B0;
	  				text-align: center;
	  				margin-left: auto;
	  			}
				
				.jubox{
					position: absolute;
					right: 0;
					top: 0;
					width: 32rpx;
					height: 32rpx;
				}
	  		}
	  
	  
	  		.qianbox {
	  			white-space: nowrap;
	  			padding-bottom: 16rpx;
	  
	  			.qli {
	  				background: rgba(69, 196, 176, 0.1);
	  				padding: 1px 6px 2px 4px;
	  				border-radius: 178px;
	  				font-size: 24rpx;
	  				color: #45C4B0;
	  				margin-right: 16rpx;
	  				display: inline-block;
	  			}
	  		}
	  
	  		.zibox {
	  			display: flex;
	  			align-items: center;
	  			justify-content: space-between;
	  
	  			.zititle {
	  				font-size: 32rpx;
	  				font-weight: bold;
	  				color: #45C4B0;
	  
	  				text {
	  					padding-left: 8rpx;
	  					font-size: 20rpx;
	  					color: #999999;
	  				}
					
					.dian {
						margin-left: 8px;
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background: #45C4B0;
					}
					
					.txt {
						font-size: 20rpx;
						font-weight: normal;
						letter-spacing: 0em;
						padding-left: 8rpx;
						color: #45C4B0;
					}
					
					.dian2{
						margin-left: 8px;
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background: #999;
					}
					.txt2{
						font-size: 20rpx;
						font-weight: normal;
						letter-spacing: 0em;
						padding-left: 8rpx;
						color: #999;
					}
	  			}
	  
	  			.zitxt {
	  				font-size: 20rpx;
	  				color: #999999;
	  			}
	  		}
	  	}
	  }
	  
	  .mask {
	  	background-color: #F2F5F2;
	  	border-radius: 8px 8px 0 0;
	  
	  	.matop {
	  		background-color: #ffffff;
	  		margin-bottom: 20rpx;
	  		padding: 40rpx 30rpx 28rpx;
	  
	  		.matitle {
	  			line-height: 40rpx;
	  			font-size: 28rpx;
	  			font-weight: bold;
	  			text-align: center;
	  			letter-spacing: 0em;
	  			color: #3D3D3D;
	  			padding-bottom: 20rpx;
	  		}
	  
	  		.bietxt {
	  			padding-bottom: 8rpx;
	  			line-height: 40rpx;
	  			font-size: 28rpx;
	  			font-weight: bold;
				
				text{
					margin-left: 8px;
					font-size: 12px;
					font-weight: normal;
					color: #999999;
				}
	  		}
	  
	  		.geetxt {
	  			padding-bottom: 8rpx;
	  			padding-top: 16rpx;
	  			line-height: 40rpx;
	  			font-size: 28rpx;
	  			font-weight: bold;
				
				text{
					margin-left: 8px;
					font-size: 12px;
					font-weight: normal;
					color: #999999;
				}
	  		}
	  
	  		.gebox {
	  			display: flex;
	  			align-items: center;
	  			justify-content: space-between;
	  
	  			.geli {
	  				width: 326rpx;
	  				height: 52rpx;
	  				overflow: hidden;
	  				border-radius: 178rpx;
	  				opacity: 1;
	  				background: rgba(153, 153, 153, 0.1);
	  				font-size: 22rpx;
	  				font-weight: normal;
	  				text-align: center;
	  				letter-spacing: 0em;
	  				color: #999999;
	  				margin-bottom: 12rpx;
	  			}
	  
	  			.li72 {
	  				line-height: 72rpx;
	  			}
	  
	  			.active {
	  				background: rgba(69, 196, 176, 0.1);
	  				color: #45C4B0;
	  			}
	  		}
	  
	  		.dengbox {
	  		
	  		}
	  	}
	  
	  	.madi {
	  		width: 100%;
	  		height: 120rpx;
	  		display: flex;
	  		align-items: center;
	  		justify-content: center;
	  		opacity: 1;
	  
	  		background: #FFFFFF;
	  
	  		.masub {
	  			width: 260rpx;
	  			height: 80rpx;
	  			border-radius: 0.2em;
	  			opacity: 1;
	  			background: #45C4B0;
	  			font-size: 32rpx;
	  			font-weight: bold;
	  			text-align: center;
	  			letter-spacing: 0em;
	  			color: #FFFFFF;
	  			line-height: 80rpx;
				margin-left: 30rpx;
	  		}
			.clear {
				background: rgba(216, 216, 216, 0.3);
				color: #999999;
			}
	  	}
	  }
	  
	  .u-popup__content.data-v-52d4ddd1 {
	  	border-radius: 8px 8px 0 0;
	  	// overflow: hidden;
	  }
	  
	  .cencal_order {
	  	padding: 20upx 4%;
	  	background-color: #fff;
	  }
	  
	  .remark {
	  	background-color: #F5F5F5;
	  	border-radius: 10upx;
	  	height: 40vw;
	  	padding: 20upx;
	  	margin-top: 20upx;
	  
	  	textarea {
	  		font-size: 26upx;
	  		color: #797979;
	  	}
	  }
	  
	  .textarea_p {
	  	font-size: 24upx;
	  	color: #797979;
	  }
	  
	  .btns {
	  	width: 100%;
	  	height: 80upx;
	  	line-height: 80upx;
	  	font-size: 30upx;
	  	color: #333;
	  	text-align: center;
	  	margin-top: 100upx;
	  	border-radius: 8upx;
	  }
	  
	  .baibox {
	  	background-color: #ffffff;
	  	width: 474rpx;
	  	border-radius: 8px;
	  	opacity: 1;
	  	padding: 100rpx 30rpx 40rpx;
	  	position: relative;
	  
	  	.baihead {
	  		width: 160rpx;
	  		height: 160rpx;
	  		border-radius: 50%;
	  		position: absolute;
	  		top: -80rpx;
	  		left: 50%;
	  		margin-left: -80rpx;
	  	}
	  
	  	.nickname {
	  		font-size: 32rpx;
	  		padding-bottom: 8rpx;
	  		font-weight: bold;
	  		text-align: center;
	  		color: #3D3D3D;
	  	}
	  
	  	.xutxt {
	  		font-size: 24rpx;
	  		text-align: center;
	  		color: #999999;
	  		padding-bottom: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
	  	}
		.exhibit{
			display: grid;
			grid-gap: 16rpx 16rpx;
			justify-content: space-between;
			grid-template-columns: repeat(auto-fill, 218rpx);
			.item{
				width: 218rpx;
				height: 218rpx;
				background: rgba(216, 216, 216, 0.3);
				border: 8rpx;
				
				image{
					border-radius: 8rpx;
					width: 218rpx;
					height: 218rpx;
				}
			}
		}
	  	.gexu {
	  		padding-bottom: 20rpx;
	  		max-height: 450rpx;
	  		border-bottom: 1px solid rgba(153, 153, 153, 0.1);
	  		margin-bottom: 20rpx;
	  
	  		.geli {
	  			display: flex;
	  			align-items: flex-start;
	  			padding-bottom: 20rpx;
	  
	  			.getitle {
	  				font-size: 28rpx;
	  				font-weight: bold;
	  				letter-spacing: 0em;
	  				color: #3D3D3D;
	  				flex-shrink: 0;
	  			}
	  
	  			.getxt {
	  			
	  				// padding-top: 1rpx;
	  				
	  				font-size: 26rpx;
	  				color: #999999;
	  				line-height: 35rpx;
	  			}
	  		}
	  	}
	  
	  	.fabox {
	  		display: flex;
	  		align-items: center;
	  		justify-content: center;
	  		width: 454rpx;
	  		height: 86rpx;
	  		border-radius: 8px;
	  		opacity: 1;
	  		background: #45C4B0;
	  		margin-top: 20rpx;
	  
	  		.fapic {
	  			width: 40rpx;
	  			height: 40rpx;
	  		}
	  
	  		.fatxt {
	  			font-size: 28rpx;
	  			font-weight: 500;
	  			padding-left: 14rpx;
	  			letter-spacing: 0em;
	  			color: #FFFFFF;
	  		}
	  	}
	  
	  }
	  .closepic {
	  	width: 40rpx;
	  	height: 40rpx;
	  	margin: 40rpx auto 0;
	  }
	  
	}
	
	.mask2 {
		background: #F2F5F2;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		overflow: hidden;
	
		.matop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 68rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			background-color: #ffffff;
	
			.mapic {
				width: 40rpx;
				height: 40rpx;
				flex-shrink: 0;
			}
	
			.matxt {
				flex-grow: 1;
				font-size: 28rpx;
				padding: 0 16rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}
		}
	
		.qubox {
			line-height: 120rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 0em;
			color: #3D3D3D;
			height: 120rpx;
			opacity: 1;
			background: #FFFFFF;
		}
	}
</style>
